<template>
    <div class="wrapper">
        <el-row>
            <el-col :span="24">
                <common-card>
                    <template #header>
                        <div style="font-family: Roboto-Thin; padding: 20px; color: #fff">
							<span style="font-size: 20px; display: inline-block; width: 100%">
								教师列表
								<el-button
                                        style="margin-left: 20px;"
                                        @click="addUser()"
                                        icon="el-icon-plus"
                                        type="primary"
                                        plain
                                        circle
                                        size="small"
                                        v-if="!isTeacher">
								</el-button>
							</span>
                            <span style="font-size: 14px; display: inline-block; width: 100%; margin-top: 10px">所有教师</span>
                        </div>
                    </template>
                    <template #main>
                        <el-row style="margin-bottom: 15px" type="flex" align="middle">
                            <el-select v-model="searchDepartmentid" clearable placeholder="学院名称" size="mini"
                                       style="margin-right: 10px" @change="handlesearch">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.departmentname"
                                        :value="item.departmentid">
                                </el-option>
                            </el-select>
                            <el-input
                                    clearable
                                    size="mini"
                                    @input="handlesearch"
                                    class="tableSearch"
                                    placeholder="教师名称"
                                    prefix-icon="el-icon-search"
                                    v-model="searchTeachername">
                            </el-input>

                        </el-row>
                        <el-table
                                v-loading="tableLoading"
                                :max-height="height"
                                :data="tableData"
                                stripe
                                style="width: 100%">
                            <el-table-column
                                    prop="teachername"
                                    label="教师姓名">
                            </el-table-column>

                            <el-table-column
                                    prop="departmentname"
                                    label="学院名称">
                            </el-table-column>
                            <el-table-column
                                    prop="gender"
                                    label="性别">
                            </el-table-column>
                            <el-table-column
                                    prop="email"
                                    label="邮箱">
                            </el-table-column>
                            <el-table-column
                                    label="操作"
                                    width="180"
                                    v-if="!isTeacher">
                                <template slot-scope="scope">
                                    <el-button
                                            @click="editUser(scope.row)"
                                            icon="el-icon-setting"
                                            type="primary"
                                            plain
                                            circle
                                            size="small">
                                    </el-button>
                                    <el-button
                                            @click="deleteTeacher(scope.row)"
                                            icon="el-icon-delete"
                                            type="danger"
                                            plain
                                            circle
                                            size="small">
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </common-card>
            </el-col>
        </el-row>
        <add-dialog :dialog-visible="isAdd" :is-edit="isEdit" @closeDialog="isOpenDialog(false)" :user-data="userData"
                    @fresh="fetchAllUser"/>
    </div>
</template>

<script>
    import CommonCard from '../../components/Cards/CommonCard';
    import addDialog from './addDialog'
    import * as college from '@/api/college';
    import user from '../../store/modules/user'
    import * as teacher from '@/api/teacher';
    import * as scoreManage from '@/api/scoreManage';
    import Cookie from "js-cookie";

    export default {
        name: 'index',
        components: {
            CommonCard,
            addDialog,
        },
        data() {
            return {
                total: 0,
                currentPage: 1,
                userData: {},
                search: '',
                tableLoading: true,
                height: '',
                isAdd: false,
                isEdit: false,
                tableData: [],
				options: [],
				searchDepartmentid: '',
				searchTeachername: '',
                isTeacher: false
            }
        },
        methods: {
			async handlesearch () {
				let req = {};
				console.log(this.searchDepartmentid);
				if (this.searchDepartmentid && this.searchTeachername) {
					req = {
                        departmentid: this.searchDepartmentid,
						teachername: this.searchTeachername
					}
				} else if (!this.searchDepartmentid && this.searchTeachername) {
					req = {
						teachername: this.searchTeachername
					}
				} else if (this.searchDepartmentid && !this.searchTeachername) {
					req = {
						departmentid: this.searchDepartmentid
					}
				}
				const res = await teacher.fetchTeacherByCondition(req);
				this.tableData = res.msg;
			},
            async getTeacherInfo(){
                let resInfo = JSON.parse(Cookie.get("userInfo"));
                console.log(resInfo);
                if (resInfo.role === 2){
                    this.studentid = resInfo.token;
                }else if (resInfo.role === 1){
                    console.log('teacherOK');
                    this.teacherusername = resInfo.token + "";
                    console.log(resInfo.token);
                    console.log(this.teacherusername);
                    const userRes = await scoreManage.getUserId(this.teacherusername);
                    this.teacherID = userRes.msg.userid;
                    if (this.teacherID){
                        this.isTeacher = true;
                        console.log(this.isTeacher);
                    }
                    console.log(this.teacherID);
                }
            },
            async deleteTeacher(data) {
                console.log(data);
                try {
                    await this.$confirm('此操作将永久删除该学院, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    });
                    await teacher.deleteTeacher(data.teacherid);
                    this.$notify({
                        title: '信息',
                        type: 'success',
                        message: '删除成功!'
                    });
                    await this.fetchAllUser();
                } catch (e) {
                    console.log(e)
                }
            },
            async fetchAllUser() {
                try {
                    this.tableLoading = true
                    const res = await teacher.fetchTeacherByCondition({});
                    console.log(res.msg)
                    this.tableData = res.msg;
                } catch (e) {
                    console.log(e)
                } finally {
                    this.tableLoading = false;
                }
            },
            editUser(data) {
                try {
                    this.userData = data;
                    this.isOpenDialog(true, true);
                } catch (e) {
                    console.log(e);
                }
            },
            addUser(data) {
                try {
                    this.userData = data;
                    this.isOpenDialog(true, false);
                } catch (e) {
                    console.log(e);
                }
            },
			async getCollege () {
				const res = await college.fetchUserList();
				this.options = res.msg
			},
            isOpenDialog(isOpen, isEdit) {
                this.isAdd = isOpen;
                this.isEdit = isEdit;
            }
        },
        created() {
            this.height = window.innerHeight - 150;
            this.fetchAllUser();
            this.getTeacherInfo();
            this.getCollege();
        }
    }
</script>

<style scoped>
    .wrapper {
        padding: 0 15px;
    }

    .tableSearch {
        width: 221px;
    }

    .tableSearch >>> .el-input__inner {
        border-radius: 415px;
    }

    .btn {
        margin-right: 7px;
    }
</style>